<template>
  <div>
    <h4>
      <i class="el-icon-menu"></i>  快捷方式
    </h4>
    <el-row>
      <el-col :span="8" v-for="item in shortcutListShow" :key="item.menuId">
        <a class="grid-content bg-purple-dark" @click="handleTo(item)">
          <icon-svg :name="item.icon"></icon-svg>
          <div>{{item.name}}</div>
        </a>
      </el-col>
      <el-col :span="8" v-if="shortcutListShow.length">
        <a class="grid-content bg-purple-dark" @click="handleClick">
          <i class="el-icon-edit"></i>
          <div>编辑</div>
        </a>
      </el-col>
      <el-col :span="8" v-if="!shortcutListShow.length">
        <a class="grid-content bg-purple-dark" @click="handleClick">
          <i class="el-icon-plus"></i>
          <div>添加</div>
        </a>
      </el-col>
    </el-row>

    <el-dialog
      title="快捷方式添加"
      :visible="dialogVisible"
      width="30%"
      :before-close="handleClose"
      center
      :close-on-click-modal="false"
    >
      <div class="table">
        <el-table
          :data="shortcutList"
          :header-cell-style="headFirst"
          height="416"
        >
          <!-- <el-table-column type="selection" width="55"></el-table-column> -->
          <el-table-column prop="isShow" label align="center" width="55">
            <template slot-scope="scope">
              <el-checkbox
                :value="scope.row.isShow"
                @change="(isCheck) => handleSelectionChange(isCheck,scope.row)"
              />
            </template>
          </el-table-column>
          <el-table-column prop="icon" label="图标" align="center" width="60">
            <template slot-scope="scope">
              <icon-svg :name="scope.row.icon"></icon-svg>
              <!-- <i :class="scope.row.icon"></i> -->
            </template>
          </el-table-column>
          <el-table-column prop="name" label="快捷名称" align="center"></el-table-column>
        </el-table>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleSumbit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 快捷方式添加窗口控制
      dialogVisible: false,
      // 选中数据的id
      pkHomeId: "",
      // 需要显示的数据
      shortcutListShow: [],
      // 完整的快捷数据
      shortcutList: [],
      // 权限列表
      menuList: [],
    };
  },
  computed: {
    dynamicMenuRoutes: {
      get() {
        return this.$store.state.common.dynamicRoutes;
      },
      set(val) {},
    },
    changeschoolid: {
      get() {
        return this.$store.state.user.changeschoolid;
      },
    },
  },
  created() {
    this.userGuid = sessionStorage.getItem("administrator");
    setTimeout(() => {
      this.menuList = JSON.parse(sessionStorage.getItem("menuList"));
      // 得到全部数据
      this.getshortcutList();
      // 得到显示的数据
      this.getUserShort();
    }, 100);
  },
  methods: {
    // 初始化列表
    setInit() {
      this.shortcutList.map((item) => {
        item.isShow = false;
      });
    },
    // 获得当前用户所拥有的快捷方式
    getUserShort() {
      this.$http({
        url: this.$http.adornUrl("/info/user/get-home-setting"),
        method: "post",
        data: this.$http.adornData({
          messageContent: {
            unitGuid: this.changeschoolid,
            userGuid: this.userGuid,
          },
          messageType: 0,
        }),
      }).then(({ data }) => {
        if (data.messageCode == 200) {
          this.pkHomeId = data.messageContent.pkHomeId;
          let arr = data.messageContent.shortcutId
            ? JSON.parse(data.messageContent.shortcutId)
            : [];
          this.shortcutListShow = [];
          // 得到显示的数据
          if (arr.length != 0) {
            // 通过id在快捷列表中找到对应的对象
            arr.map((item) => {
              this.shortcutList.some((itemMune) => {
                if (itemMune.menuId == item) {
                  this.shortcutListShow.push(itemMune);
                  this.getCheck(itemMune.menuId, true);
                }
              });
            });
          }
        } else {
          this.$message.error(data.errorMessage);
        }
      });
    },
    handleClose(done) {
      console.log(this.shortcutList);
      this.dialogVisible = false;
    },
    // 遍历查找id
    getCheck(id, isShow) {
      this.shortcutList.map((item) => {
        if (item.menuId == id) {
          item.isShow = isShow;
        }
      });
    },
    // 获取快捷方式列表
    getshortcutList() {
      this.menuList = JSON.parse(sessionStorage.getItem("menuList"));
      this.shortcutList = [];
    // 递归算法,遍历数组
      this.getArr(this.menuList)
    },
    // 递归算法
    getArr(arr) {
      arr.map((item) => {
        if (item.list) {
          this.getArr(item.list);
        } else {
          this.shortcutList.push({ name: item.name,icon:item.icon,menuId:item.menuId,isShow:false});
        }
      });
    },
    // 跳转链接
    handleTo(menu) {
      // 通过menuId与动态(菜单)路由进行匹配跳转至指定路由
      var route = this.dynamicMenuRoutes.filter(
        (item) => item.meta.menuId === menu.menuId
      );
      if (route.length >= 1) {
        this.$router.push({ name: route[0].name });
      }
    },
    // 弹出弹框
    handleClick() {
      this.setInit();
      this.getUserShort();
      this.dialogVisible = true;
    },
    // 选中数据
    handleSelectionChange(isCheck, row) {
      let i = 0;
      this.shortcutList.map((item) => {
        if (item.isShow) {
          i++;
        }
      });
      if (isCheck && i > 7) {
        this.$message({
          message: "最多可以设置8个快捷方式",
          type: "warning",
        });
        return false;
      }
      this.getCheck(row.menuId, isCheck);
    },
    // 提交
    handleSumbit() {
      let arr = [];
      // 将显示的数组的id提取出来，然后提交
      this.shortcutList.map((item) => {
        if (item.isShow) {
          arr.push(item.menuId);
        }
      });
      if (arr.length > 8) {
        this.$message({
          message: "最多可以设置8个快捷方式",
          type: "warning",
        });
        return false;
      }
      let shortcutStr = JSON.stringify(arr);
      this.$http({
        url: this.$http.adornUrl("/info/user/update-home-setting"),
        method: "post",
        data: this.$http.adornData({
          messageContent: {
            unitGuid: this.changeschoolid,
            userGuid: this.userGuid,
            pkHomeId: this.pkHomeId,
            shortcutId: shortcutStr,
          },
          messageType: 0,
        }),
      }).then(({ data }) => {
        if (data.messageCode == 200) {
          this.getUserShort();
          this.dialogVisible = false;
        } else {
          this.$message.error(data.errorMessage);
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.table {
  margin-left: -30px;
}
h4 {
  margin: 0;
  padding-top: 0.8vh;
  padding-left: 0.8vw;
}
.el-row {
  padding: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  a {
    text-decoration: none;
  }
  a:hover {
    cursor: pointer;
    box-shadow: 0 0 10px #aaa;
  }
}
.bg-purple-dark {
  //   background: #99a9bf;
  box-shadow: 0 0 5px #eee;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: 10vh;
  margin: 0.3vh;
  i,
  svg {
    font-size: 5vh;
    color: #17b3a3;
  }
  overflow: hidden;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>
